<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    #box {
        width: 400px;
        height: 400px;
        position: relative;
    }

    #box img {
        width: 400px;
        height: 400px;
    }

    #magnify {
        width: 400px;
        height: 400px;
        position: absolute;
        overflow: hidden;
        display: none;
    }

    #magnify img {
        width: 800px;
        height: 800px;
    }

    #zoom {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: red;
        opacity: 0.2;
        cursor: move;
        /* 移动鼠标 */
        display: none;
    }

    #main img {
        width: 100px;
        height: 125px;
    }
</style>

<body>
    <div id="box">
        <img src="./img/1.jpg" alt="" id="img1">
        <div id="zoom"></div>

    </div>
    <div id="main">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
    </div>
    <div id="magnify">
        <img src="./img/1.jpg" alt="">
    </div>
</body>。 
<script>
    $(function () {
        displayObj()
    })
    // 下面的小图片图片
    var lis = $('#main img')
    for (let i = 0; i < lis.length; i++) {
        $('#main img').eq(i).click(function () {
            $('#img1').prop('src', `./img/${i + 1}.jpg`)
            $('#magnify img').prop('src', `./img/${i + 1}.jpg`)
        })
    }

    function displayObj() {
        // 鼠标悬停
        $('#box').mouseenter(function (e) {
            // 要放大的图片
            let smallLeft = $('#box').offset().left;
            let smallTop = $('#box').offset().top;
            // 显示大图片的位置
            $('#magnify').show().offset({
                left: smallLeft + 400 + 10,
                top: smallTop
            })
            // 放大镜显示
            $('#zoom').show();
            // 鼠标移动事件
            $(this).mousemove(function (e) {
                // 鼠标在小图片的位置
                let mLeft = e.pageX - smallLeft;
                let mTop = e.pageY - smallTop;
                // 设置放大镜元素位置
                let zLeft = Math.min(Math.max(mLeft - 100, 0), 200);
                let zTop = Math.min(Math.max(mTop - 100, 0), 200);
                //控制zoom元素并且跟着鼠标运动
                $('#zoom').css('left', zLeft + 'px').css('top', zTop + 'px');
                //控制大图显示部分内容
                $('#magnify').scrollLeft(zLeft * 2).scrollTop(zTop * 2);
            })
        }).mouseleave(function () {
            // 鼠标离开放大后的图片隐藏
            $('#magnify').hide();
            // 鼠标离开放大镜隐藏
            $('#zoom').hide()
        })
    }
</script>

</html>